import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/constants/hero_tag.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/checkpoint/user_card.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/checkpoint/actions.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/checkpoint/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_eve_plugin/utils/toast_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class CheckpointPrepareGameCenterAddWidget extends StatefulWidget {
  final List<CardList> data;
  CheckpointPrepareGameCenterAddWidget({Key key, this.data}) : super(key: key);

  _CheckpointPrepareGameCenterAddWidgetState createState() =>
      _CheckpointPrepareGameCenterAddWidgetState();
}

class _CheckpointPrepareGameCenterAddWidgetState
    extends State<CheckpointPrepareGameCenterAddWidget> {
  List<Widget> createItem(int len, AppStateViewModel vm, List<CardList> info) {
    return List<Widget>.generate(len, (index) {
      var select = vm.state.yeXiuState.checkpointState.selectKey;
      var selectMap = vm.state.yeXiuState.checkpointState.selectMap;
      CardList cardInfo;
      List<ShowAttrInfo> attrList = [];
      info.forEach((item) {
        if ((item?.card?.cardId ?? '') == selectMap[index]) {
          cardInfo = item;
        }
      });
      var showAttrInfo1 = ShowAttrInfo(
          title: '战斗力:',
          num: cardInfo?.fightingCapacity ?? 0,
          color: Color(0xFFFFBF13));
      var showAttrInfo2 = ShowAttrInfo(
          title: 'hp',
          num: cardInfo?.cardLevel?.hp ?? 0,
          color: Color(0xFFFF9595));
      var showAttrInfo3 = ShowAttrInfo(
          title: 'atk',
          num: cardInfo?.cardLevel?.atk ?? 0,
          color: Color(0xFFFFAC91));
      var showAttrInfo4 = ShowAttrInfo(
          title: 'def',
          num: cardInfo?.cardLevel?.def ?? 0,
          color: Color(0xFFF1CB6B));
      var showAttrInfo5 = ShowAttrInfo(
          title: 'res',
          num: cardInfo?.cardLevel?.res ?? 0,
          color: Color(0xFF97D9F8));
      attrList.add(showAttrInfo1);
      attrList.add(showAttrInfo2);
      attrList.add(showAttrInfo3);
      attrList.add(showAttrInfo4);
      attrList.add(showAttrInfo5);

      return GestureDetector(
        onTap: () {
          if (selectMap[index] == null) {
            vm.yeXiuStateViewModel.checkpointStateViewModel
                .updateSelectKeyFun(index);
          }
        },
        child: Container(
          width: setRatio(85),
          height: setRatio(220),
          decoration: BoxDecoration(
            border: selectMap[index] != null
                ? Border.all(color: Colors.transparent)
                : Border.all(
                    color:
                        select == index ? Color(0xFFFFBF13) : Color(0xFFD9D9D9),
                    width: setRatio(1)),
            borderRadius: BorderRadius.circular(setRatio(5)),
            gradient: LinearGradient(
              colors: [
                Color(0x6F000000),
                Color(0x4f000000),
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
          child: selectMap[index] != null
              ? Stack(
                  children: <Widget>[
                    GestureDetector(
                      onLongPressStart: (details) {
                        Toast.showAttr(context, attrList);
                      },
                      onLongPressEnd: (details) {
                        Toast.dissAttr();
                      },
                      child: Container(
                        width: setRatio(85),
                        height: setRatio(220),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(setRatio(5)),
                            image: DecorationImage(
                                fit: BoxFit.cover,
                                image: NetworkImage(
                                    cardInfo?.card?.picUrlBig ?? ''))),
                      ),
                    ),
                    Positioned(
                        top: setRatio(3),
                        right: setRatio(3),
                        child: GestureDetector(
                          onTap: () {
                            vm.yeXiuStateViewModel.checkpointStateViewModel
                                .selectFun({index: null});
                            //确定下一个选择框 map遍历顺序不可控 采用0..4 索引
                            int nextSelect = 0;
                            for (var i = 0; i < 4; i++) {
                              if (selectMap[i] == null) {
                                nextSelect = i;
                                break;
                              }
                            }
                            vm.yeXiuStateViewModel.checkpointStateViewModel
                                .updateSelectKeyFun(nextSelect);
                          },
                          child: Image.asset(
                            imageUtilYeXiu('main/icon_close@3x'),
                            width: setRatio(22),
                            height: setRatio(22),
                          ),
                        )),
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Image.asset(
                        qualityCharImg(cardInfo),
                        width: setRatio(30),
                        height: setRatio(30),
                      ),
                    ),
                    Positioned(
                      bottom: setRatio(23),
                      left: 0,
                      right: 0,
                      child: Text.rich(
                        TextSpan(
                            style: TextStyle(
                                decoration: TextDecoration.none,
                                color: Color(0xFFFFFFFF),
                                fontFamily: FontFamily.PMZD,
                                fontSize: setTextSp(9)),
                            children: [
                              TextSpan(text: 'Lv.'),
                              TextSpan(
                                  text: '${cardInfo?.cardLevel?.level ?? 0}',
                                  style: TextStyle(fontSize: setTextSp(11))),
                            ]),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      left: 0,
                      right: 0,
                      child: Container(
                        height: setRatio(17),
                        decoration: BoxDecoration(
                            color: Color(0x4F000000),
                            borderRadius: BorderRadius.only(
                                bottomLeft: Radius.circular(setRatio(5)),
                                bottomRight: Radius.circular(setRatio(5)))),
                        child: Center(
                          child: Text.rich(
                            TextSpan(
                                style: TextStyle(
                                  decoration: TextDecoration.none,
                                  color: Color(0xFFFFFFFF),
                                  fontFamily: FontFamily.PINGFANG,
                                  fontWeight: FontWeightCustom.PF_Medium,
                                  fontSize: setTextSp(10),
                                ),
                                children: [
                                  TextSpan(text: '战斗力'),
                                  TextSpan(
                                      text:
                                          '${cardInfo?.fightingCapacity ?? 0}',
                                      style:
                                          TextStyle(color: Color(0xFFFFBF13))),
                                ]),
                          ),
                        ),
                      ),
                    )
                  ],
                )
              : Stack(
                  children: <Widget>[
                    Positioned(
                      left: setRatio(33),
                      top: setRatio(100),
                      child: Image.asset(
                        select == index
                            ? imageUtilYeXiu(
                                'checkpoint/icon_checkpoint_prepare_game_add_select@3x')
                            : imageUtilYeXiu(
                                'checkpoint/icon_checkpoint_prepare_game_add@3x'),
                        width: setRatio(20),
                        height: setRatio(20),
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      left: 0,
                      right: 0,
                      child: Container(
                        height: setRatio(17),
                        decoration: BoxDecoration(
                            color: Color(0x4F000000),
                            borderRadius: BorderRadius.only(
                                bottomLeft: Radius.circular(setRatio(5)),
                                bottomRight: Radius.circular(setRatio(5)))),
                        child: Center(
                          child: Text(
                            '未选择',
                            style: TextStyle(
                                color: Color(0xFFFFFFFF),
                                fontFamily: FontFamily.PINGFANG,
                                fontWeight: FontWeightCustom.PF_Medium,
                                fontSize: setTextSp(10)),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
        ),
      );
    }).toList();
  }

  String qualityCharImg(CardList info) {
    switch (info?.card?.quality ?? 0) {
      case 5:
        return imageUtilYeXiu('checkpoint/icon_level_s@3x');
      case 4:
        return imageUtilYeXiu('checkpoint/icon_level_a@3x');
      case 3:
        return imageUtilYeXiu('checkpoint/icon_level_b@3x');
      case 2:
        return imageUtilYeXiu('checkpoint/icon_level_c@3x');
      case 1:
        return imageUtilYeXiu('checkpoint/icon_level_d@3x');
      default:
        return imageUtilYeXiu('checkpoint/icon_level_s@3x');
    }
  }

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(
          state: store.state,
          yeXiuStateViewModel: YeXiuStateViewModel(
              checkpointStateViewModel:
                  CheckpointStateViewModel(updateSelectKeyFun: (index) {
            updateSelectKey(store, index);
          }, selectFun: (map) {
            pushSelectMap(store, map);
          })));
    }, builder: (context, vm) {
      return Container(
        width: setRatio(375),
        padding: EdgeInsets.only(
            left: setRatio(10), right: setRatio(10), top: setRatio(29)),
        child: Hero(
          tag: HeroTag.GAME_GRID_ROW,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: createItem(4, vm, widget.data),
          ),
        ),
      );
    });
  }
}

class ShowAttrInfo {
  final String title;
  final int num;
  final Color color;

  ShowAttrInfo({this.title, this.num, this.color});
}
